<template>
  <div>
    <Row style="padding-top: 16px;">
      <i-col span="24" class="y_query_right">
        <DatePicker type="date" placeholder="Select date" v-model="tParam.searchParams.date" class="y_condition"></DatePicker>
        <Button type="primary" icon="md-search" @click="search" class="y_condition">查询</Button>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border ref="productDailyList" :columns="productDailyTable" :data="productDailyList"
            class="table_css" no-data-text="暂无数据" @on-sort-change="sortChanged"></Table>-->
    <List border class="data-list">
      <template v-if="productDailyList.length == 0">
        <ListItem class="list-item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <ListItem v-for="(item, index) in productDailyList" :key="index" class="list-item">
          <div class="item-top">
            <KeyValueView title="产品编码">
              <a :href="$tiyProductUrl(item.productCode)" target="_blank">{{item.productCode}}</a>
            </KeyValueView>
            <KeyValueView title="一级分类" :value="item.classification1Name"></KeyValueView>
            <KeyValueView title="二级分类" :value="item.classification2Name"></KeyValueView>
            <KeyValueView title="加购次数" :value="item.addCartTimes"></KeyValueView>
            <KeyValueView title="加购数量" :value="item.addCartNumber"></KeyValueView>
            <KeyValueView title="订单数" :value="item.orderCount"></KeyValueView>
            <KeyValueView title="下单次数" :value="item.orderTimes"></KeyValueView>
            <KeyValueView title="下单数量" :value="item.orderNumber"></KeyValueView>
            <KeyValueView title="销售额" :value="item.saleAmount"></KeyValueView>
          </div>
        </ListItem>
      </template>
    </List>

    <div style="float: right; margin-top: 20px;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts=[40,60,80,120]
            show-sizer show-elevator/>
    </div>
  </div>
</template>

<!--javascript 代码-->
<script>
    import ICol from "../../../node_modules/view-design/src/components/grid/col";
    import tiyData from "./js/productDaily/productDaily_data";
    import {
        init,
        searchService
    } from "./js/productDaily/productDaily_funs";
    import KeyValueView from "../widgets/KeyValueView";

    export default {
        components: {KeyValueView, ICol},
        data(){
            return {
                tRole: {//权限
                },
                tParam : tiyData.tParams,
                tPage : tiyData.tPage,
                productDailyList : tiyData.tData.productDailyList,
                productDailyTable :tiyData.productDailyTable(this),
            }
        },
        computed: {
        },
        methods: {
            search(){
                searchService(this,tiyData);
            },
            changePage(page){
                tiyData.tPage.currentPage = page;
                searchService(this, tiyData);
            },
            sizeChange(p){
                tiyData.tPage.stepNumber = p;
                searchService(this, tiyData);
            },
            sortChanged(sort){
              tiyData.tPage.currentPage = 1;
              if(sort.order && sort.order != "normal"){
                tiyData.tParams.searchParams.orderKey = sort.key;
                tiyData.tParams.searchParams.orderType = sort.order;
              }
              searchService(this, tiyData);
            },
        },
        created(){
            init(tiyData);
        }
    }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }

  .data-list {
    margin: 1rem 0rem;
    line-height: 25px;
    .list-item {
      .flex-colum-wrap;
      justify-items: left;
      align-items: start;
      .item-checkbox {
        display: inline-block;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: top;
      }
      .item-img {
        width: 130px;
        text-align: center;
        display: inline-block;
      }
      .item-top{
        width: 100%;
        margin-bottom: 5px;
        .flex-row-wrap;
        justify-content: left;
      }
      .item-content {
        margin-bottom: 35px;
        text-align: left;
      }
      .item-bottom{
        //position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: block;
        //padding: 0 1rem 0.5rem 0;
        text-align: right;
        button {
          margin-left: 0.5rem;
        }
      }
    }
  }
</style>
